<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="18">
        <el-row :gutter="20">
          <!-- 工单统计  -->
          <el-col :span="13">
            <el-card class="box-card1 public_card">
              <template #header>
                <div class="title">工单统计</div>
                <span>{{ oneDaySmall }} ~ {{ orderTime }}</span>
              </template>
              <div class="card_body_txt">
                <h4>383</h4>
                <span>工单总数（个）</span>
              </div>
              <div class="card_body_txt">
                <h4>0</h4>
                <span>完成工单（个）</span>
              </div>
              <div class="card_body_txt">
                <h4>0</h4>
                <span>进行工单（个）</span>
              </div>
              <div class="card_body_txt">
                <h4>383</h4>
                <span>取消工单（个）</span>
              </div>
            </el-card>
          </el-col>
          <!-- 工单统计 -->
          <el-col :span="11">
            <el-card class="box-card2 public_card">
              <template #header>
                <div class="title">销售统计</div>
                <span>{{ oneDaySmall }} ~ {{ orderTime }}</span>
              </template>
              <div class="card_body_txt">
                <h4>{{ orderCount }}</h4>
                <span>订单量（个）</span>
              </div>
              <div class="card_body_txt">
                <h4>{{ OrderAmount }}</h4>
                <span>销售额（万元）</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 树状图 -->
        <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="24">
            <el-card class="box-card3">
              <template #header>
                <div class="title">
                  销售数据 <span>{{ oneDaySmall }} ~ {{ orderTime }}</span>
                </div>
                <div class="box-bottom">
                  <div
                    @click="updataTime('week')"
                    class="item"
                    :class="{ active: num === 'week' }"
                  >
                    周
                  </div>
                  <div
                    @click="updataTime('month')"
                    class="item"
                    :class="{ active: num === 'month' }"
                  >
                    月
                  </div>
                  <div
                    @click="updataTime('year')"
                    class="item"
                    :class="{ active: num === 'year' }"
                  >
                    年
                  </div>
                </div>
              </template>
              <div class="AmountCollect" ref="AmountCollect"></div>
              <div class="regioncollect" ref="regioncollect"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <!-- 排行 -->
      <el-col :span="6" class="card_6">
        <el-card class="box-card-right">
          <template #header>
            <div class="title">商品热榜</div>
            <span>{{ oneDaySmall }} ~ {{ orderTime }}</span>
          </template>
          <el-row v-for="(item, index) in kuTopList" :key="index">
            <el-col :span="5">
              <div class="top" :class="index + 1 < 4 ? top + (index + 1) : ''">
                {{ index + 1 }}
              </div>
            </el-col>
            <el-col :span="13">
              <div class="contend">{{ item.skuName }}</div>
            </el-col>
            <el-col :span="6">
              <div class="bottom">{{ item.count }}单</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 底部 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="14">
        <el-card class="box-card-bottom1">
          <template #header>
            <div class="title">合作商点位数Top5</div>
          </template>
          <div class="NodeCollet" ref="NodeCollet"></div>
          <div class="collect">
            <div class="count">22</div>
            <div class="name">点位数</div>
            <div class="count count2">5</div>
            <div class="name">合作商数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="box-card-bottom2">
          <template #header>
            <div class="title">异常设备监控</div>
          </template>
          <div class="title">
            <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
          <div class="tips">暂无数据</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { bigNumber } from '@/utils/publicFuntion'
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import {
  getOrderCount,
  getOrderAmount,
  getRegionCollect,
  getAmountCollect,
  getskuTop,
  getNodeCollet
} from '@/api/layout'

export default {
  name: 'LiEcharts',
  data () {
    return {
      orderTime: dayjs().format('YYYY-MM-DD'), // 订单结束时间
      mondayTime: dayjs()
        .subtract(dayjs().day() ? dayjs().day() - 1 : 6, 'day')
        .format('YYYY-MM-DD'), // 当前这周第一天的时间
      oneDyaTime: dayjs()
        .startOf('month')
        .format('YYYY-MM-DD HH:mm:ss'), // 当前时间月份的第一天具体时间
      oneDaySmall: dayjs().startOf('month').format('YYYY-MM-DD'), // 当前时间月份的第一天初略时间
      yearDay: dayjs().startOf('year').format('YYYY-MM-DD'), // 今年的第一天
      newTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), // 当前具体时间
      orderCount: 0, // 订单总数
      OrderAmount: 0, // 销售总数
      CollectChartInfo: {}, // 销售额趋势数据
      RegionCollectInfo: {}, // 销售额分布数据
      num: '', // 判断周月年样式
      kuTopList: [], // 商品前十数据
      top: 'top', // 奖杯属性
      NodeColletInfo: [] // 合作商点位数
    }
  },
  async created () {
    // 请求公共条件
    const publicTime = {
      start: this.oneDyaTime,
      end: this.newTime
    }
    // 订单总数
    this.orderCount = await getOrderCount(publicTime)
    // 销售总数 处理数字
    this.OrderAmount = bigNumber(await getOrderAmount(publicTime))
    // 商品前十
    this.kuTopList = await getskuTop({
      topValue: 10,
      start: this.oneDaySmall,
      end: this.orderTime
    })
    // 合作商点位数
    this.NodeColletInfo = await getNodeCollet()
    this.NodeCollet()
  },
  mounted () {
    // 页面挂载完毕点击一次数据让它显示
    this.updataTime()
  },
  methods: {
    // 销售数据
    async updataTime (info = 'week') {
      // 周
      if (info === 'week') {
        this.num = 'week'
        // 销售额分布
        this.RegionCollectInfo = await getRegionCollect({
          start: this.mondayTime,
          end: this.orderTime
        })
        // 销售额趋势
        this.CollectChartInfo = await getAmountCollect({
          collectType: 1,
          start: this.mondayTime,
          end: this.orderTime
        })
      } else if (info === 'month') {
        this.num = 'month'
        // 销售额分布
        this.RegionCollectInfo = await getRegionCollect({
          start: this.oneDaySmall,
          end: this.orderTime
        })
        // 销售额趋势
        this.CollectChartInfo = await getAmountCollect({
          collectType: 1,
          start: this.oneDaySmall,
          end: this.orderTime
        })
      } else {
        this.num = 'year'
        // 销售额分布
        this.RegionCollectInfo = await getRegionCollect({
          start: this.yearDay,
          end: this.orderTime
        })
        // 销售额趋势
        this.CollectChartInfo = await getAmountCollect({
          collectType: 2,
          start: this.yearDay,
          end: this.orderTime
        })
      }
      // 调用图标
      this.AmountCollect()
      this.RegionCollect()
    },
    // 销售额趋势
    AmountCollect () {
      const AmountCollectChart = echarts.init(this.$refs.AmountCollect)
      const option = {
        title: [
          {
            text: '销售额趋势图',
            left: '40%',
            top: '6%',
            textStyle: {
              fontSize: '14px'
            }
          },
          {
            text: '单位：元',
            left: '4%',
            top: '8%',
            textStyle: {
              fontSize: '12px',
              color: '#ccc'
            }
          }
        ],
        grid: {
          left: '20%'
        },
        xAxis: {
          type: 'category',
          data: this.CollectChartInfo.xAxis,
          boundaryGap: false, // x轴两边不留空白
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: '#ccc'
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          show: true
        },
        color: ['red'],
        series: [
          {
            data: this.CollectChartInfo.series,
            type: 'line',
            smooth: true,
            symbolSize: 8,
            lineStyle: {
              width: 4
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'red' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      AmountCollectChart.setOption(option)
    },
    // 销售额分布
    RegionCollect () {
      const regioncollectChart = echarts.init(this.$refs.regioncollect)
      const option = {
        title: [
          {
            text: '销售额分布',
            left: '40%',
            top: '6%',
            textStyle: {
              fontSize: '14px'
            }
          },
          {
            text: '单位：元',
            left: '4%',
            top: '8%',
            textStyle: {
              fontSize: '12px',
              color: '#ccc'
            }
          }
        ],
        tooltip: {
          show: true
        },
        grid: {
          left: '20%'
        },
        xAxis: {
          type: 'category',
          data: this.RegionCollectInfo.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.RegionCollectInfo.series,
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              borderRadius: [6, 6, 0, 0] // 重点
            }
          }
        ]
      }
      regioncollectChart.setOption(option)
    },
    // 合作商点位数
    NodeCollet () {
      const NodeColletChart = echarts.init(this.$refs.NodeCollet)
      const option = {
        toolbox: {
          show: true
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '合作商点位',
            type: 'pie',
            radius: [40, 100],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                formatter: `{b}
              {d}%` // 自定义显示格式(b:name, c:value, d:百分比)
              }
            },
            data: this.NodeColletInfo
          }
        ]
      }
      NodeColletChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
  .active {
    background-color: #fff;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    border-radius: 7px;
    font-weight: 600;
    color: #333 !important;
  }
  .el-card {
    border-radius: 20px;
    padding: 20px;
  }
  // 卡片公共样式
  .public_card {
    height: 166px;
    display: flex;
    flex-direction: column;
    ::v-deep .el-card__body {
      padding: 0 20px;
      height: 120px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .card_body_txt {
        h4 {
          height: 50px;
          line-height: 50px;
          font-size: 36px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
        }
        span {
          font-size: 12px;
        }
      }
    }
  }
  // 卡片公共头部
  ::v-deep .el-card__header {
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    .title {
      font-weight: 700;
      margin-right: 10px;
    }
    span {
      font-size: 14px;
      color: #999;
      padding-top: 5px;
    }
  }
  // 工单统计
  .box-card1 {
    background: #e9f3ff;
    // background-image: url('~@/assets/bgc1.png'),
      // url('http://likede2-admin.itheima.net/img/task.66b715b7.png');
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, calc(100% - 12px) 100%;
    .card_body_txt {
      h4 {
        color: #072074;
        text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
      }
      span {
        color: #91a7dc;
      }
    }
  }
  // 销售统计
  .box-card2 {
    background: #fbefe8 url('~@/assets/bgc2.png') no-repeat calc(100% - 12px) 100%;
    ::v-deep .el-card__body {
      padding: 0 40px;
      .card_body_txt {
        h4 {
          color: #ff5757;
          text-shadow: 2px 4px 7px rgb(255 99 85 / 50);
        }
        span {
          color: #de9690;
        }
      }
    }
  }
  .box-card-right {
    height: 538px;
    ::v-deep .el-card__body {
      height: 500px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        width: 20px;
        height: 20px;
        text-align: center;
        font-size: 12px;
        color: #e9b499;
        background: url('~@/assets/putong.png');
      }
      .top1 {
        color: #8e5900;
        background: url('~@/assets/jiangbei1.png');
      }
      .top2 {
        color: #494949;
        background: url('~@/assets/jiangbei2.png');
      }
      .top3 {
        color: #cf6d3d;
        background: url('~@/assets/jiangbei3.png');
      }
      .contend {
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        font-weight: 500;
        font-family: PingFangSC-Medium, PingFang SC;
      }
      .bottom {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #737589;
        line-height: 20px;
        text-align: right;
      }
    }
  }
  .box-card3 {
    // width: 100%;
    height: 352px;
    ::v-deep .el-card__header {
      display: flex;
      justify-content: space-between;
      .box-bottom {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 129px;
        height: 34px;
        background: rgba(233, 243, 255, 0.37);
        border-radius: 10px;
        .item {
          width: 37px;
          height: 25px;
          line-height: 25px;
          font-size: 14px;
          color: #9ca3b4;
          cursor: pointer;
          text-align: center;
        }
      }
    }
    ::v-deep .el-card__body {
      display: flex;
      padding-top: 18px;
      .AmountCollect {
        height: 300px;
        width: 50%;
      }
      .regioncollect {
        height: 300px;
        width: 50%;
      }
    }
  }
  .box-card-bottom1 {
    height: 352px;
    ::v-deep .el-card__body {
      padding: 0;
      display: flex;
      justify-content: space-between;
      .NodeCollet {
        height: 320px;
        width: 60%;
      }
      .collect {
        width: 154px;
        height: 230px;
        margin-top: 40px;
        padding-top: 47px;
        padding-left: 38px;
        background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
          linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
          linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
          linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        .count {
          height: 33px;
          font-size: 24px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #072074;
          line-height: 33px;
        }
        .count2{
          margin-top: 20px;
        }
        .name {
          height: 17px;
          margin-top: 6px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000412;
          line-height: 17px;
        }
      }
    }
  }
  .box-card-bottom2 {
    height: 352px;
    .title{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .tips{
        margin-top: 20px;
      }
    }
  }
</style>
